<template>
  <div class="review">
    <div class="headline pa-ai-center">
      <div class="line pa-mr-2"></div>
      <div class="title">基本信息</div>
    </div>
    <div class="secondLine pa-flex">
      <div>
        <div class="text">项目名称</div>
        <div class="content">{{ evalDetail.projectName }}</div>
      </div>
      <div>
        <div class="text">事项名称</div>
        <div class="content">{{ evalDetail.eventName }}</div>
      </div>
      <div>
        <div class="text">中介机构名称</div>
        <div class="content">{{ evalDetail.corporateName }}</div>
      </div>
    </div>
    <div v-if="isEval == 0">
      <div class="headline pa-ai-center">
        <div class="line pa-mr-2"></div>
        <div class="title">我的评价</div>
      </div>
      <div class="evaluation">
        <div class="firstLine pa-jc-between">
          <div class="pa-flex">
            <el-rate
              v-model="score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            ></el-rate>
          </div>
          <div class="date">{{ evalDetail.createTime }}</div>
        </div>
        <div class="evalContent">{{ evalDetail.comment }}</div>
      </div>
    </div>
    <div v-if="isEval == 1">
      <div class="headline pa-ai-center">
        <div class="line pa-mr-2"></div>
        <div class="title">添加评价</div>
      </div>
      <div class="addRate">
        <el-rate v-model="rate"></el-rate>
      </div>
      <el-input type="textarea" placeholder="请输入评价内容..." :rows="4" v-model="newContent"></el-input>
      <div class="buttonBlock">
        <el-button class="button" @click="addEvaluation">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getEvaluationDetailApi, addEvaluationApi } from '@/api/intermediaryApi.js'
export default {
  data () {
    return {
        userInfo: localStorage.getItem('P-User-Info') ? JSON.parse(localStorage.getItem('P-User-Info')) : { username: '', headPortrait: '' },
        newContent: '',
      evalDetail: {},
      score: 0,
      isEval: '',
      rate: 0,
      evalId: '',
      intermediaryId: ''
    }
  },
  mounted () {
    if (this.$route.query) {
      this.evalId = this.$route.query.id
      this.isEval = this.$route.query.isEval
      this.intermediaryId = this.$route.query.intermediaryId
      console.log(typeof this.$route.query.isEval)
    }
    this.getEvaluationDetail()
  },
  methods: {
    getEvaluationDetail () {
        console.log('userInfo', this.userInfo)
      getEvaluationDetailApi({
        id: this.evalId,
          userId: this.userInfo.id
      }).then(res => {
        if (res.code == 0) {
          this.evalDetail = res.data
            if (isNaN(parseFloat(res.data.score))) return
            if (parseFloat(res.data.score) > 5) {
                this.score = 5
                return;
            }
          this.score = parseFloat(res.data.score)
        }
      })
    },
    addEvaluation () {
      addEvaluationApi({
        id: this.evalId,
        intermediaryId: this.intermediaryId,
        projectId: this.evalDetail.projectId,
        eventId: this.evalDetail.eventId,
        score: this.rate,
        comment: this.newContent,
        userId: this.evalDetail.userId
      }).then(res => {
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.review {
  background-color: #fff;
  padding: 40px 50px 150px 50px;
  .headline {
    margin-bottom: 30px;
  }
  .addRate {
    margin-bottom: 32px;
  }
  .line {
    width: 9px;
    height: 35px;
    background: #2f86fd;
    border-radius: 4px;
  }
  .title {
    font-size: 26px;
    color: #0a1629;
  }
  .secondLine {
    margin-bottom: 48px;
    & > div {
      margin-right: 80px;
      &:last-child {
        margin-right: 0;
      }
    }
    .text {
      color: #999999;
      margin-bottom: 22px;
    }
    .content {
      font-size: 20px;
      color: #0a1629;
    }
  }
  .evaluation {
    height: 354px;
    background: #f5fafd;
    border: 1px solid #dadada;
    border-radius: 10px;
    padding: 32px 25px 0 33px;
    .firstLine {
      margin-bottom: 32px;
      .user {
        font-size: 26px;
        color: #0a1629;
      }
      .date {
        font-size: 20px;
        color: #999999;
      }
    }
    .evalContent {
      font-size: 20px;
      color: #666666;
    }
  }
  .buttonBlock {
    display: flex;
    justify-content: flex-end;
    .button {
      width: 137px;
      height: 44px;
      background: #4880ff;
      border-radius: 5px;
      font-size: 22px;
      color: #fff;
      margin-top: 32px;
    }
  }
}
</style>
